<!--  -->
<template>
  <div class="classes">
    <Header>
      <template slot="left">
        <p></p>
      </template>
      <template slot="center"><p>分类</p></template>
      <template slot="right"><p></p></template>
    </Header>
    <main>
      <van-tree-select height="100%" :items="items" :main-active-index.sync="active">
        <template #content>
          <div class="Right-top">
            <span>
              <h1>浏览足迹</h1>
              <p>清空</p>
            </span>
            <div class="message">
              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>
            </div>
          </div>
          <div class="Right-bottom">
            <span>
              <h1>热门分类</h1>
              <p>排行榜</p>
            </span>
            <div class="message">
              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img12.360buyimg.com/focus/s140x140_jfs/t1/131424/31/274/19042/5ecb3bc2E96ef8448/0188085e6fd6cd12.png"
                />
                <span>电脑</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img14.360buyimg.com/focus/s140x140_jfs/t27136/183/1628977274/31007/a6f7ed55/5be6ebd8Nb07ef492.png"
                />
                <span>手机</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>

              <div class="message-img">
                <van-image
                  v-if="active === 0"
                  class="img"
                  src="https://img11.360buyimg.com/focus/s140x140_jfs/t1/117080/5/10502/18158/5ef0103eE416ae569/898a7ac882ba6c63.jpg"
                />
                <span>空调</span>
              </div>
            </div>
          </div>
        </template>
      </van-tree-select>
    </main>
    <!-- <footer>
      <router-link to>首页</router-link>
      <router-link to>分类</router-link>
      <router-link to>购物车</router-link>
      <router-link to>我的</router-link>
    </footer> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, TreeSelect } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(TreeSelect);
export default {
  components: {},
  data() {
    return {
      active: 0,
      items: [
        { text: "热门推荐" },
        { text: "手机数码" },
        { text: "电脑办公" },
        { text: "家用电器" },
        { text: "计生情趣" },
        { text: "美妆护肤" },
        { text: "个护清洁" },
        { text: "汽车生活" },
        { text: "京东超市" },
        { text: "男装" },
        { text: "男鞋" },
        { text: "女装" },
        { text: "女鞋" },
        { text: "母婴童装" }
      ]
    };
  }
};
</script>
<style lang='scss'>
@import "@css/style.scss";
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.classes {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: px2rem(44);
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
  line-height: px2rem(44);
  font-size: $titleSize;
}
main {
  flex: 1;
  overflow-y: hidden;
}
footer {
  height: px2rem(50);
  border-top: 1px solid #e5e5e5;
  font-size: $titleSize;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
h1 {
  font-weight: bold;
  margin: px2rem(15);
}
.Right-top,
.Right-bottom {
  margin-bottom: px2rem(30);
  span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-right: px2rem(6);
      color: #ccc;
    }
  }
}
.van-sidebar {
  width: 45%;
}
.van-tree-select__content {
  overflow-y: auto;
}
.message {
  display: flex;
  flex-wrap: wrap;
}
.message-img {
  width: 60px;
  height: 80px;
  margin: px2rem(10);
  span {
    width: 60px;
    display: block;
    text-align: center;
  }
}
</style>